<template>
  <div 
    v-loading="loading"
    element-loading-text="玩命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!-- # 标题 -->
    <div class="tabbar" :style="{ 'background': background_color  }">
        <span>小小笔记本</span>
        <div class="right_wrappered">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <div class="selection img_wrapper">
                <img class="head_img selection" :src="imgUrl" alt="">
                &nbsp;{{ name }}
            </div>
        </div>
    </div>
    <div class="zhaozi" :style='{ "background": ground_color, "color": font_color}'>
        <div class="drop index_it" :style='{ "background": ground_color, "color": font_color}'>
            <div class="introduce_it" :style='{ "background": background_color}'>
                <div class="title_of_it">
                    <span class="xiahuaxian">文章分类：{{ kind_name }}</span>
                    <span>共 <i> {{ artical_fenye }} </i> 篇</span>
                </div>
            </div>
            <!-- 文章列表 -->
            <ul class="artical_list introduce_it" :style='{ "color": font_color}' >
                <li v-for="item in artical_list" :key="item.id" class="artical_item" :style='{"background-color": background_color, "margin-bottom": "5px"}'>
                    <!-- 左侧图片 -->
                    <div class="image">
                        <img :src="item.image_url" alt="">
                    </div>
                    <div class="artical_detail">
                        <!-- 上侧作者 -->
                        <div style="font-size: 9px;" class="author">
                        <div>
                            <img style=" width: 27px; height: 27px; border-radius: 50%" :src="imgUrl" alt="">
                            <span>&nbsp;{{ name }}</span>
                        </div>
                        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-date">&nbsp;</i>{{ item.add_time }}</div>
                        </div>
                        
                        <div class="content">
                        <!-- 文章标题 -->
                        <router-link class="title" :to="'/artical/' + item.id">&nbsp;&nbsp;{{ item.title }}</router-link>
                        <div class="artical_neirong">
                            <!-- 二级标题 -->
                            <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;{{ item.second_title }}
                            </p>
                        </div>
                        <div class="details">
                            <span style="color: tomato;"><i  class="el-icon-notebook-2"></i>&nbsp;{{ item.kind__kind_name }}&nbsp;&nbsp;</span>
                            <span><i class="el-icon-view"></i> 查看数：{{ item.read_num }}&nbsp;&nbsp;</span>
                            <span><i class="el-icon-chat-dot-round"></i> 评论数：{{ item.comment_num }} </span>
                        </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div style="margin-bottom: -10px;" class="fenye FENYE1">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"   
                :background='true' 
                :pager-count="pagerCount"
                layout="total, prev, pager, next, jumper"
                :total="artical_fenye">
                </el-pagination>
            </div>
        </div>
        <div style="width: 5px; height: 800px; background: transparent"></div>
    </div>
    <!-- 底部的备案信息 -->
    <div class="legal">
        <div class="legal_inner">
            Copyright © 2021 Leexun. powered by Django.
        </div>
        <div class="legal_inner">
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">皖ICP备2021008932号</a>
            <span>&nbsp; | &nbsp;已续航{{ day }}天</span>
        </div>
    </div>
  </div>
</template>

<script>
import { color,host } from '../network/color_check.js';
import Cookies from 'js-cookie';
import Qs from 'qs'
import axios from 'axios';

export default {
    data() {
        return {
            id: this.$route.params.id, //将URL 地址中传递过来的Id值 挂载到data,方便以后调用,
            name: '',
            imgUrl: '',
            loading: '',
            day: 1,

            kind_name: '',
            artical_list: [],
            artical_fenye: 0,
            currentPage:1,//初始页
            pagesize:8,//每一页的数量,
            pagerCount:5,//展示到多少页时 中间显示...，取值在5~21之间

            ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色, 
            background_color: 'white', // 元素的背景颜色，white, #18222d!important
            font_color: 'black',
            a_color: 'pink',
            tabbar_color: 'pink',
            write_color: '#eff7ff', // #18222d!important
        }
    },
    created() {
        this.loading = true;
        this.day = this.dateDiff('2021-08-11');
        var a = Cookies.get();
        // 遍历cookie的值
        for(let key in a){
            // console.log(key);
            if( a[key] === '1' ) {
                this.name = key;
                break;
            }
        }
        this.imgUrl= '';
        // 获取头像
        if( Cookies.get('img_url') ) {
            this.imgUrl = Cookies.get('img_url');
        } else if (this.name){
            this.$message.error("获取头像失败");
        }
        
        this.ground_color = color.ground_color;
        this.background_color = color.background_color;
        this.font_color = color.font_color;
        this.tabbar_color = color.tabbar_color;
        this.a_color= color.a_color;
        this.write_color = color.write_color;
        this.value = color.value;
        this.getArtical_list();
        this.loading = false;
    },
    methods: {
        dateDiff(sDate1) {
			 	var date2 = new Date();
			 	var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
			 	var iDays = parseInt(Math.abs(date2.getTime()- date1.getTime()) /1000/60/60/24); 
			 	return iDays;
		},
        handleSizeChange:function(size){
            //选择 一页展示多少数据时 调用的方法
            this.pagesize = size;
        },
        handleCurrentChange:function(currentPage){
            //点击页面项 的函数响应
            this.currentPage = currentPage;
            this.getArtical_list();
        },
    // 获取文章，以时间顺序：
        getArtical_list() {
            // 发送axios请求获取文章类别
            axios({
                url:  host.url+'/artical/list/'+ this.id + '/'+ this.currentPage +'.htm',
                method: 'get',
            })
            .then(suc =>{
                this.artical_fenye = suc.data.Allsize;
                this.artical_list = suc.data.artical_list;
                this.kind_name = suc.data.kind_name;
            })
            .catch(fail => {
                this.$message.error("获取文章失败啦..");
            });
      },
    }
}
</script>

<style>
.index_it {
    height: 100%;
}
.FENYE1 {
    padding-bottom: 60px;
}
.chuiniubi {
    margin: 10px 10px;
}
.xiahuaxian {
    border-bottom: 2px solid #D8D8D8;
}
.title_of_it {
    height: 45px;
    line-height: 45px;
    margin: 0px 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
}
.title_of_it i {
    color: #04B486;
}
.introduce_it {
    width: 65%;
    margin: 15px auto;
}
</style>